<template>
    <div class='EditKey'>
        <div>
            <div v-if="type == 'zset'">
                <el-alert title="开发中" type="warning"  effect="dark" show-icon :closable="false"/>
                <div class="flex mt-10">
                    <el-input-number class="mr-10" v-model="select_item_new.score" style="flex:1;" size="mini" controls-position="right" />
                    <el-button size="mini" type="success" :loading="loading" :disabled="select_item_new.score == select_item.score" @click="scoreSubmit">提交</el-button>
                </div>
                <el-input v-if="type == 'zset'" class="mt-10" v-model="select_item_new.element" :rows="5" type="textarea" :placeholder="'原始内容:'+select_item.element" />
            </div>


            <div v-else-if="type == 'hash'" class="flex">
                <el-input class="mr-10" disabled v-model="select_item_new.key" style="flex:1;" size="mini" :placeholder="'原始内容:'+select_item.key" />
                <el-button size="mini" type="success" :loading="loading" :disabled="select_item_new.key == select_item.key" @click="keySubmit">提交</el-button>
            </div>
            <div v-else-if="type == 'list'" class="flex">
                <el-input v-model="select_item_new.index" style="flex:1;" size="mini" disabled />
            </div>

            <el-input v-if="type == 'hash'" class="mt-10" v-model="select_item_new.value" :rows="5" type="textarea" :placeholder="'原始内容:'+select_item.value" />
            <el-input v-else-if="type == 'list'" class="mt-10" v-model="select_item_new.value" :rows="5" type="textarea" :placeholder="'原始内容:'+select_item.value" />
            <el-input v-else-if="type == 'set'" v-model="select_item_new.value" :rows="5" type="textarea" :placeholder="'原始内容:'+select_item.value" />
            <div class="btns">
                <el-button :loading="loading" @click="reset" size="mini" type="info" :disabled="resetDisabled">重置</el-button>
                <el-button :loading="loading" @click="submit" size="mini" type="success" :disabled="disabled">提交</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { set_srem, set_sedit } from '@/api/key/set';
import { list_lset } from '@/api/key/list';
import { hash_hedit } from '@/api/key/hash';
import { defineComponent, reactive, toRefs } from 'vue';
import { mapGetters } from 'vuex'
import { ElNotification, ElMessageBox, ElMessage } from 'element-plus'
export default defineComponent({
    name: 'EditKey',
    components: {},
    setup(omprops, content) {
        const state = reactive({
            loading: false,
            value: '',
            select_item_new: {},
        })
        return toRefs(state)
    },
    props: {
        // type: String,
        select_item: {
            type: [Object, String]
        }
    },
    computed: {
        ...mapGetters([
            'select_key',
            'key_type'
        ]),
        type() {
            return this.key_type
        },
        disabled() {
            if (this.type == 'zset') return this.select_item_new.element == this.select_item.element
            if (this.type == 'set') return this.select_item_new == this.select_item
            if (this.type == 'list') return this.select_item_new.value == this.select_item.value
            if (this.type == 'hash') return this.select_item_new.value == this.select_item.value
            return true
        },
        resetDisabled() {
            if (this.type == 'zset') return this.select_item_new.element == this.select_item.element && this.select_item_new.score == this.select_item.score
            if (this.type == 'set') return this.select_item_new == this.select_item
            if (this.type == 'list') return this.select_item_new.value == this.select_item.value
            if (this.type == 'hash') return this.select_item_new.value == this.select_item.value && this.select_item_new.key == this.select_item.key
            return true
        }
    },
    watch: {
        // key变化
        select_item(n, o) {
            if (typeof n != 'undefined' && this.key_type != 'ing') {
                if (typeof n == 'object') {
                    this.select_item_new = JSON.parse(JSON.stringify(n))
                } else {
                    this.select_item_new = n + ''
                }
            }
        },
    },
    mounted() {
        if (typeof this.select_item != 'undefined') {
            if (typeof this.select_item == 'object') {
                this.select_item_new = JSON.parse(JSON.stringify(this.select_item))
            } else {
                this.select_item_new = this.select_item + ''
            }
        }
    },
    methods: {
        submit() {
            const sub = {
                set: this.edit_set,
                list: this.edit_list,
                zset: this.edit_zset,
                hash: this.edit_hash,
            }
            sub[this.type]().then((res) => {
                console.log("------", res);
                this.$emit('edit', res)
            }).finally(() => {
                this.loading = false
            })
        },
        edit_zset(n, o) {
            ElMessage("开发中")
        },
        edit_set(n, o) {
            return set_sedit(this.select_key, this.select_item.value, this.select_item_new.value).then((res) => {
                this.success(`${res.data.map.oldValue} -> ${res.data.map.value}`)
                return {
                    old: res.data.map.oldValue,
                    new: res.data.map.value
                }
            })
        },
        edit_list(n, o) {
            return list_lset(this.select_key, this.select_item.index, this.select_item.value, this.select_item_new.value).then((res) => {
                this.success(`${res.data.map.oldValue} -> ${res.data.map.value}`)
                return {
                    old: this.select_item,
                    new: this.select_item_new
                }
            })
        },
        edit_hash(n, o) {
            return hash_hedit(this.select_key, this.select_item.key, this.select_item.value, this.select_item_new.value).then((res) => {
                this.success(`${res.data.map.oldValue} -> ${res.data.map.value}`)
                return {
                    old: this.select_item,
                    new: this.select_item_new
                }
            })
        },
        // 添加成功通知
        success(s) {
            ElNotification({
                title: '修改成功',
                message: s,
                type: 'success',
            })
        },

        // 重置
        reset() {
            this.select_item_new = JSON.parse(JSON.stringify(this.select_item))
        },

        scoreSubmit() {

        },

        keySubmit() {

        }
    },
})
</script>

<style scoped lang="less">
// 底部操作
.EditKey {
    .flex {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .btns {
        margin-top: 10px;
        display: flex;
    }
}
</style>
<style lang="less">
.EditKey {
    // 数字输入框文字居左
    .el-input-number .el-input__inner {
        text-align: left;
    }
}
</style>